<template>
    <view>
        <status-bar title="支付明细"></status-bar>
        <view class="Time">支付剩余时间：{{ minutes }}:{{ seconds }}</view>
        <view class="Info">
            <image :src="$imgUrls(site_time.img)" mode="aspectFill" class="Info_img"></image>
            <view class="content">
                <text class="name">{{ site_time.name }}</text>
                <text class="startTime">开宴时间：{{ site_time.open_date_time }}</text>
                <text class="startTime">下单时间：{{ info.add_time }}</text>
            </view>
        </view>

        <view class="banquet">
            <text class="title">坐席信息</text>

            <view class="row j-sb">
                <view class="banBox" v-for="(item, index) in info.sites_detail" :key="index">
                    <view class="banList">{{ item.type_name }} {{ item.name }}</view>
                    <view class="panBoX">
                        <view
                            class="panlist"
                            :class="{ Active: item.goods_id == subItem.goods_id }"
                            v-for="(subItem, subIndex) in item.goods"
                            :key="subIndex"
                            @click.stop="selectSeat(index, subItem)">
                            <image
                                :src="$imgUrls(subItem.img)"
                                mode="aspectFill"
                                class="panImg"></image>
                            <text class="panTxt">{{ subItem.name }}</text>
                            <view class="select">
                                <view class="iconfont icon-xuanzhong h7 bold"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="Customer">
            <text class="title">顾客信息</text>
            <view class="CustList">
                <input
                    type="text"
                    class="Inputplace"
                    placeholder="请输入联系人"
                    v-model="user_name"
                    placeholder-class="place" />
                <view class="seleBox">
                    <view class="liS" :class="{ Active: sex == 1 }" @click.stop="sex = 1">
                        <view class="Boxs">
                            <view class="iconfont icon-xuanzhong size30"></view>
                        </view>
                        <text class="liS_name">才子</text>
                    </view>
                    <view class="liS" :class="{ Active: sex == 0 }" @click.stop="sex = 0">
                        <view class="Boxs">
                            <view class="iconfont icon-xuanzhong size30"></view>
                        </view>
                        <text class="liS_name">佳人</text>
                    </view>
                </view>
            </view>

            <view class="CustList">
                <input
                    type="number"
                    class="Inputplace"
                    placeholder="请输入联系手机"
                    maxlength="11"
                    v-model="user_tel"
                    placeholder-class="place" />
                <view class="d-flex a-center m-left30">
                    <button
                        class="getPhones"
                        open-type="getPhoneNumber"
                        @getphonenumber="getPhoneNumber">
                        获取手机号
                    </button>
                </view>
            </view>
        </view>

        <view class="assembly" v-if="pageData.make_up_desc">
            <!-- v-if="make_up.length" -->
            <view class="row j-sb a-center">
                <view class="d-flex a-center">
                    <text class="title">妆造服务</text>
                    <!-- <text class="color_33 h6 m-left20"
                        >已选({{ pageData.make_up_num }}/{{ pageData.choose_limit }})</text
                    > -->
                </view>
                <!--  <text class="color_33 h6"
                    >当前余位:{{ pageData.available_make_up_num }}/{{
                        pageData.total_make_up_num
                    }}</text> -->
            </view>

            <u-parse :content="pageData.make_up_desc" :domain="imgUrl"></u-parse>

            <view class="seletTime">
                <view
                    class="timeList"
                    :class="{ timeActive: index == make_up_index }"
                    v-for="(item, index) in make_up"
                    :key="index"
                    @click.stop="make_up_index = index">
                    {{ item.time }}
                </view>
            </view>
            <view class="row m-top20" v-if="make_up.length">
                <view
                    class="whenList"
                    :class="{ Active: seletmake.indexOf(item.id) != -1 }"
                    @click.stop="selectMack(item.id, item.state, item)"
                    v-for="(item, index) in make_up[make_up_index].list"
                    :key="item.id">
                    <text class="whenTxt">{{ item.state == 1 ? '无法预约' : '当前空闲' }}</text>
                    <view class="select">
                        <view
                            class="iconfont h7 bold"
                            :class="item.state == 1 ? 'icon-guanbi2' : 'icon-xuanzhong'"></view>
                    </view>
                </view>
            </view>
        </view>

        <view class="couponBox" v-if="seletmakeItem.length">
            <view class="d-flex a-center">
                <text class="title">当前选择</text>
                <text class="color_66 h6 p-left20">( 妆造劵{{ couponLog.length }}张 )</text>
            </view>
            <view class="Wrapper">
                <block v-for="(item, index) in seletmakeItem" :key="index">
                    <view class="couList">
                        <text class="color_d85 size36">{{ item.time }}</text>
                        <view
                            class="d-flex a-center"
                            @click.stop="showCoupon(item, item.id, index)">
                            <view class="selet" :class="{ seletActive: item.coupon_id }">
                                <view class="iconfont icon-xuanzhong"></view>
                            </view>
                            <text class="color_d85 h6">妆造劵</text>
                        </view>
                        <view
                            class="iconfont icon-butongguo"
                            @click="selectMack(item.id, item.state, item)"></view>
                    </view>
                </block>
            </view>
        </view>

        <view class="Photography" v-if="pageData.photography">
            <text class="title">摄影预约</text>
            <u-parse :content="pageData.photography" :domain="imgUrl"></u-parse>
            <view class="photoBox" v-if="photography_times.length">
                <view
                    class="list"
                    @click="photoSelect(item, index)"
                    v-for="(item, index) in photography_times"
                    :key="index">
                    <view class="dot" :class="{ noDot: item.state != 0, active: item.select == 1 }">
                        <view class="iconfont icon-xuanzhong size30"></view>
                    </view>
                    <text class="time">{{ item.time }}</text>
                </view>
            </view>
        </view>

        <!-- 预定须知 -->
        <view class="Cosmetic" v-if="pageData.content">
            <text class="title">预定须知</text>
            <view class="rows m-top10">
                <u-parse :content="pageData.content"></u-parse>
            </view>
        </view>

        <view class="agreement" @click="agree = !agree">
            <view class="agrees" :class="{ Active: agree }">
                <view class="iconfont icon-xuanzhong size30"></view>
            </view>
            <text class="ageTxt">我已阅读并同意</text>
            <text class="ageList" @click.stop="toUrl(`agreement?id=${pageData.article_id}`)"
                >《秀宴预定服务协议》</text
            >
        </view>

        <view class="footer">
            <view class="Box">
                <view class="d-flex a-center">
                    <text class="color_99 size30">￥</text>
                    <text class="Price">{{ info.payment }}</text>
                </view>
                <view class="NowPlay" @click.stop="continum">立即支付</view>
            </view>
        </view>

        <u-popup :show="Show" @close="Show = false" mode="bottom" :round="10" closeable>
            <view class="Wrapper">
                <view class="head">
                    <text class="black size36 bold500">请选择优惠券</text>
                </view>
                <view class="content">
                    <view
                        class="Lists"
                        @click="Use_couponId(item.coupon_id)"
                        :class="{ Active: couponId == item.coupon_id }"
                        v-for="(item, index) in couponLog"
                        :key="index">
                        <!-- 抵用券 1 -->
                        <view class="cou_Left" v-if="item.type == 1">
                            <view class="d-flex a-center white">
                                <text class="unit">{{ item.unit }}</text>
                                <text class="bold" :class="[getPriceClass(item)]">{{
                                    item.price
                                }}</text>
                            </view>
                        </view>
                        <!-- 折扣券 2 -->
                        <view class="cou_Left" v-if="item.type == 2">
                            <view class="d-flex a-center white">
                                <text class="size66 bold">{{ item.price }}</text>
                                <text class="h6 m-top28 m-left4">{{ item.priElse }}</text>
                            </view>
                        </view>
                        <view class="cou_Center">
                            <text class="ellipsis_2 cou_title">{{ item.title }}</text>
                            <text class="color_99 size22">{{ item.expiryDate }}</text>
                            <text class="ellipsis color_33 h6">{{ item.info }}</text>
                        </view>
                        <view class="cou_Rigth">
                            <text class="icon-xuanzhong iconfont size28"></text>
                        </view>
                    </view>

                    <emptys
                        empty="coupon"
                        v-if="!couponLog.length"
                        title="~暂无可用优惠券~"></emptys>
                </view>
                <view class="footer" v-if="couponLog.length">
                    <view class="newCreat" @click="couponConfig">确定</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                imgUrl: this.imgUrl,
                sex: 1,
                img: 'https://msraimgcdn.mogoie.com/6142/1734408147886.png',
                content: `1、收费标准：498元/半小时，精修4张、底片20张 <br/> 2、妆造另行收费<br/> 3、预约定金：100元 <br/> 4、请在预约拍摄时间前(至少半个小时)到店妆造`,
                make_up_index: 0,
                site_config: '',
                minutes: '',
                seconds: '',
                timer: null,
                diffTime: 0,
                info: '',
                order_id: '',
                site_time: '',
                pageData: '',
                goods: [],
                make_up: [],
                seletmake: [],
                seletmakeItem: [],
                user_name: '',
                user_tel: '',
                agree: false,
                hideBg: true,
                couponLog: [],
                Show: false,
                couponId: '',
                timeId: '',
                photography_times: '',
                photography_ids: '',
            };
        },
        onLoad(opt) {
            this.diffTime = 0;
            clearInterval(this.timer);
            this.timer = null;
            if (opt.order_id) this.order_id = opt.order_id;

            this.getLockOrder();
        },
        onShow() {
            // #ifdef MP-WEIXIN
            let that = this;
            let options = wx.getEnterOptionsSync();
            if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
                let extraData = options.referrerInfo.extraData;
                if (!extraData) return;
                if (extraData.code == 'success') {
                    clearInterval(that.timer);
                    that.timer = null;
                    uni.reLaunch({
                        url: `/Reserve/After/preOrder?order_id=${this.order_id}&home=true`,
                        complete() {
                            if (that.timer) {
                                clearInterval(that.timer);
                                that.timer = null;
                            }
                        },
                    });
                    // uni.redirectTo({
                    // 	url: '/Reserve/Makelist',
                    // 	complete() {
                    // 		if (that.timer) {
                    // 			clearInterval(that.timer);
                    // 			that.timer = null;
                    // 		}
                    // 	},
                    // });
                }
            }
            // #endif
        },
        methods: {
            getLockOrder() {
                let sites_choose = [];
                if (this.info) {
                    for (let i = 0; i < this.info.sites_detail.length; i++) {
                        let item = this.info.sites_detail[i];
                        let obj = {
                            id: item.id,
                            goods_id: item.goods_id,
                            make_up_id: item.make_up_id,
                        };
                        sites_choose.push(obj);
                    }
                }

                this.seletmakeItem.forEach((item, index) => {
                    if (item.coupon_id) {
                        sites_choose[index].coupon_id = item.coupon_id;
                    } else {
                        sites_choose[index].coupon_id = 0;
                    }
                });

                this.$http
                    .get({
                        url: '/SiteApiV2/getLockOrder',
                        data: {
                            order_id: this.order_id,
                            sites_choose: sites_choose.length ? JSON.stringify(sites_choose) : '',
                            photography_ids: this.photography_ids,
                        },
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg, 2);
                        const Result = res.data;
                        this.pageData = Result;
                        this.couponLog = Result.couponLog || [];

                        if (Result.site_time) this.site_time = Result.site_time;
                        if (Result.info) {
                            Result.info.sites_detail.forEach((item) => {
                                // item.goods = Result.goods;
                                // 默认选中成人成人餐
                                if (!item.goods_id) item.goods_id = Result.goods[0].goods_id;
                            });
                        }
                        this.info = Result.info;
                        this.photography_times = Result.photography_times;
                        if (Result.goods) this.goods = Result.goods;

                        if (Result.make_up) {
                            Result.make_up.forEach((item) => {
                                if (item.list) {
                                    const result = item.list.every((n) => n.state == 1);
                                    result ? (item.state = 1) : (item.state = 0);
                                } else {
                                    item.state = 0;
                                }
                            });
                            this.make_up = Result.make_up;
                        }

                        if (Result.member_info) {
                            this.user_name = Result.member_info.v_name;
                            this.user_tel = Result.member_info.v_tel;
                        }
                        if (this.diffTime > 0) return;
                        if (Result.info.diffTime) {
                            this.diffTime = Number(Result.info.diffTime);
                            this.diffCountdown();
                        } else if (Result.info.expire_time) {
                            this.startCountdown(Result.info.expire_time);
                        }
                    });
            },

            photoSelect(currentItem, index) {
                if (currentItem.state != 0) return;

                this.photography_times.forEach((item) => {
                    item.select = item.id == currentItem.id ? 1 : 0;
                });
                this.photography_ids = currentItem.id;
                this.getLockOrder();
                // console.log(this.photography_times, 'photography_times');
            },

            // 选择摄影预约
            // selectMake_up(Item, Index) {
            //     if (Item.state == 1) return;
            //     if (this.make_up_index === Index) {
            //         this.make_up_index = '';
            //         this.info.sites_detail[0].make_up_id = 0;
            //     } else {
            //         this.make_up_index = Index;
            //         const ItemData = Item.list;
            //         outermost: for (let item of ItemData) {
            //             if (item.state == 0) {
            //                 this.info.sites_detail[0].make_up_id = item.id;
            //                 break outermost;
            //             }
            //         }
            //     }
            //     if (!Item.list) this.info.sites_detail[0].make_up_id = 0;

            //     this.getLockOrder();
            // },

            continum() {
                let that = this;
                const regex = /^1[3456789]\d{9}$/;
                let sites_choose = [];
                for (let i = 0; i < this.info.sites_detail.length; i++) {
                    let item = this.info.sites_detail[i];
                    if (item.goods_id == 0 || !item.goods_id) return this.$Toast('请选择套餐');
                    let obj = {
                        id: item.id,
                        goods_id: item.goods_id,
                        make_up_id: item.make_up_id,
                    };
                    sites_choose.push(obj);
                }
                this.seletmakeItem.forEach((item, index) => {
                    if (item.coupon_id) {
                        sites_choose[index].coupon_id = item.coupon_id;
                    } else {
                        sites_choose[index].coupon_id = '';
                    }
                });

                if (!this.user_name) return this.$Toast('请填写联系人');
                if (!this.user_tel) return this.$Toast('请填写联系人手机号码');
                if (!regex.test(this.user_tel)) return this.$Toast('手机号码有误');
                if (!this.agree) return this.$Toast('未同意协议');
                this.$showLoading('');
                clearInterval(that.timer);
                that.timer = null;
                this.$http
                    .get({
                        url: '/SiteApiV2/payLockOrder',
                        data: {
                            order_id: this.order_id,
                            sites_choose: JSON.stringify(sites_choose),
                            user_name: this.user_name,
                            user_tel: this.user_tel,
                            sex: this.sex,
                            photography_ids: this.photography_ids,
                        },
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != '100') return this.$Toast(res.msg);
                        const Result = res.data;
                        // #ifdef MP-WEIXIN
                        if (Result.extraData) {
                            wx.openEmbeddedMiniProgram({
                                appId: Result.appId,
                                extraData: Result.extraData,
                            });
                            return;
                        }
                        uni.getProvider({
                            service: 'oauth',
                            success: function (resp) {
                                console.log(resp.provider);
                                if (resp.provider) {
                                    uni.requestPayment({
                                        provider: resp.provider[0],
                                        orderInfo: Result,
                                        timeStamp: Result.timeStamp,
                                        nonceStr: Result.nonceStr,
                                        package: Result.package,
                                        signType: Result.signType,
                                        paySign: Result.paySign,
                                        success: function (resj) {
                                            uni.redirectTo({
                                                url: '/Reserve/Makelist',
                                                complete() {
                                                    console.log('200');
                                                    if (that.timer) {
                                                        clearInterval(that.timer);
                                                        that.timer = null;
                                                    }
                                                },
                                            });
                                        },
                                        fail: function (err) {
                                            console.log('fail:' + JSON.stringify(err));
                                        },
                                    });
                                }
                            },
                        });
                        // #endif
                    });
            },

            selectSeat(index, subItem) {
                this.info.sites_detail[index].goods_id = subItem.goods_id;
                this.getLockOrder();
            },

            selectMack(make_up_id, state, Item) {
                this.couponId = '';
                if (state == 1) return;
                const Flag = this.seletmake.some((n) => n == make_up_id);
                if (Flag) {
                    const Index = this.seletmake.findIndex((n) => n == make_up_id);
                    this.seletmake.splice(Index, 1);
                    const i = this.seletmakeItem.findIndex((n) => n.id == make_up_id);
                    this.seletmakeItem.splice(i, 1);
                } else {
                    if (this.seletmake.length == this.info.sites_detail.length)
                        return this.$Toast(`最多选择${this.info.sites_detail.length}位`);
                    this.seletmake.push(make_up_id);
                    this.seletmakeItem.push(Item);
                }

                this.pageData.make_up_num = this.seletmake.length;
                for (let i = 0; i < this.info.sites_detail.length; i++) {
                    if (this.seletmake.length > i) {
                        this.info.sites_detail[i].make_up_id = this.seletmake[i];
                    } else {
                        this.info.sites_detail[i].make_up_id = 0;
                    }
                }

                this.getLockOrder();
            },

            showCoupon(Item, id, Index) {
                if (Item.coupon_id) {
                    const current = this.seletmakeItem.findIndex(
                        (n) => n.coupon_id == Item.coupon_id
                    );
                    this.seletmakeItem[current].coupon_id = '';
                    this.getLockOrder();

                    return;
                }
                this.timeId = id;
                this.Show = true;
            },
            Use_couponId(coupon_id) {
                if (this.couponId != coupon_id) {
                    this.couponId = coupon_id;
                    const Current = this.seletmakeItem.findIndex((n) => n.id == this.timeId);
                    this.seletmakeItem[Current].coupon_id = coupon_id;
                } else {
                    this.couponId = '';
                    const Current = this.seletmakeItem.findIndex((n) => n.id == this.timeId);
                    this.seletmakeItem[Current].coupon_id = '';
                }
            },
            couponConfig() {
                this.Show = false;
                this.couponId = '';
                this.getLockOrder();
            },
            async getPhoneNumber(e) {
                let result = e.detail;
                if (result.errMsg != 'getPhoneNumber:ok')
                    return this.$Toast('隐私协议未完成手机号获取权限');
                const jscode = await this.getProvider();
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/appletDecodePhone',
                        data: {
                            encryptedData: result.encryptedData,
                            iv: result.iv,
                            session_key: this.session_key,
                            js_code: jscode,
                        },
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.user_tel = res.data;
                    });
            },
            getProvider() {
                return new Promise((resolve, reject) => {
                    uni.getProvider({
                        service: 'oauth',
                        success: (res) => {
                            uni.login({
                                provider: res.provider[0],
                                success: (req) => {
                                    resolve(req.code);
                                },
                            });
                        },
                    });
                });
            },

            diffCountdown() {
                let that = this;
                if (this.timer) {
                    clearInterval(this.timer);
                    this.timer = null;
                }
                that.timer = setInterval(() => {
                    if (that.diffTime > 0) {
                        that.diffTime--;
                    } else {
                        clearInterval(that.timer);
                        that.$Toast('支付超时,请重新选座', 2);
                        return;
                    }

                    let minutes =
                        Math.floor(that.diffTime / 60) >= 10
                            ? Math.floor(that.diffTime / 60)
                            : '0' + Math.floor(that.diffTime / 60);
                    let seconds =
                        Math.floor(that.diffTime % 60) >= 10
                            ? Math.floor(that.diffTime % 60)
                            : '0' + Math.floor(that.diffTime % 60);
                    that.minutes = minutes;
                    that.seconds = seconds;
                }, 1000);
            },
            startCountdown(expire_time) {
                let that = this;
                if (this.timer) {
                    clearInterval(this.timer);
                    this.timer = null;
                }
                that.timer = setInterval(() => {
                    let now = Date.now();
                    let diff = Number(expire_time) * 1000 - now;
                    console.log(diff, 'diff');
                    if (diff <= 0) {
                        clearInterval(that.timer);
                        that.$Toast('支付超时,请重新选座', 2);
                        return;
                    }
                    let remainingSeconds = Math.floor(diff / 1000);
                    let hours = Math.floor(remainingSeconds / 3600);
                    let minutes =
                        Math.floor((remainingSeconds % 3600) / 60) >= 10
                            ? Math.floor((remainingSeconds % 3600) / 60)
                            : '0' + Math.floor((remainingSeconds % 3600) / 60);
                    let seconds =
                        remainingSeconds % 60 >= 10
                            ? remainingSeconds % 60
                            : '0' + (remainingSeconds % 60);
                    that.minutes = minutes;
                    that.seconds = seconds;
                }, 1000);
            },
            getPriceClass(item) {
                return item.price >= 10000 ? 'size50' : 'size66';
            },
        },
        computed: {
            ...mapState(['session_key']),
        },
        onPageScroll(e) {
            this.hideBg = e.scrollTop < 50;
        },
        onUnload() {
            clearInterval(this.timer);
            this.timer = null;
        },
    };
</script>

<style lang="scss">
    page {
        background-color: #f4f3ef;
        padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
    }
</style>
<style lang="scss" scopeds>
    @mixin Fleac {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .Wrapper {
        width: 100%;

        .head {
            width: 100%;
            height: 100rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            &_title {
                width: 100%;
                padding: 30rpx 0 30rpx;
                display: flex;
                justify-content: center;
                color: #000;
                font-size: 34rpx;
                border-bottom: 1rpx solid rgba(153, 153, 153, 0.3);
            }

            &_sale {
                width: 100%;
                padding: 20rpx 24rpx;

                .Sale_txt {
                    color: #000;
                    font-size: 24rpx;
                    font-weight: normal;
                }
            }
        }

        .content {
            width: 100%;
            background-color: #f7f8fa;
            height: 800rpx;
            padding: 0 24rpx 24rpx;
            overflow-y: scroll;

            .Lists {
                width: 100%;
                height: 200rpx;
                background-color: #ffffff;
                margin-top: 24rpx;
                display: flex;
                align-items: center;
                border-radius: 10rpx;
                overflow: hidden;

                .cou_Left {
                    @include Fleac;
                    flex-direction: column;
                    width: 200rpx;
                    height: 100%;
                    background-image: linear-gradient(to right, #6b98db, #6a7dd6);

                    .unit {
                        font-size: 28rpx;
                        margin-top: 22rpx;
                    }
                }

                .cou_Center {
                    flex: 1;
                    height: 200rpx;
                    padding: 14rpx 20rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .cou_title {
                        color: #000;
                        font-size: 32rpx;
                    }
                }
            }

            .PointsList {
                width: 100%;
                padding: 30rpx 24rpx;
                background-color: #ffffff;
                border-radius: 10rpx;
                margin-top: 24rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .cou_Rigth {
                width: 34rpx;
                height: 34rpx;
                border: 1px solid #ccc;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 20rpx;
            }

            .Active {
                .cou_Rigth {
                    background-color: $color_d85;
                    border: 1px solid $color_d85;
                }
            }
        }

        .footer {
            width: 100%;
            height: 100rpx;
            @include Fleac;

            .newCreat {
                @include Fleac;
                width: 600rpx;
                height: 70rpx;
                background-color: $color_d85;
                border-radius: 35rpx;
                color: #ffffff;
                font-size: 32rpx;
            }
        }
    }
    .couponBox {
        width: 730rpx;
        background-color: #fff;
        margin: 24rpx auto 0 auto;
        border-radius: 10rpx;
        padding: 20rpx 20rpx 50rpx 20rpx;
        display: flex;
        flex-direction: column;
        .Wrapper {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30rpx;
            margin-top: 30rpx;
            .couList {
                height: 100rpx;
                padding: 0 20rpx;
                border-radius: 10rpx;
                border: 1px solid $color_d85;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .selet {
                    width: 36rpx;
                    height: 36rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 1px solid $color_d85;
                    margin-right: 10rpx;
                    border-radius: 6rpx;
                    .icon-xuanzhong {
                        font-size: 32rpx;
                        color: #fff;

                        overflow: hidden;
                    }
                }
                .seletActive {
                    background-color: $color_d85 !important;
                }
                .icon-butongguo {
                    font-size: 46rpx;
                    background-color: #fff;
                    color: $color_d85;
                    position: absolute;
                    top: -14rpx;
                    right: -14rpx;
                    z-index: 10;
                    border-radius: 50%;
                }
            }
        }
    }
    .assembly {
        width: 730rpx;
        background-color: #fff;
        margin: 24rpx auto 0 auto;

        border-radius: 10rpx;
        padding: 20rpx;
        .intro {
            width: 100%;
            margin-top: 20rpx;
            font-size: 24rpx;
        }
        .seat_one {
            color: #977e52;
            font-size: 34rpx;
            font-weight: bold;
        }
        .seat_two {
            color: #000;
            font-size: 34rpx;
            font-weight: bold;
        }
        .seletTime {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .timeList {
                width: 314rpx;
                height: 70rpx;
                background-color: #f2eae7;
                border-radius: 10rpx;
                padding: 0 20rpx;
                display: flex;
                align-items: center;
                margin-top: 30rpx;
                font-size: 28rpx;
                color: #000;
                border: 2rpx solid #f2eae7;
            }
            .timeActive {
                background-color: #fff;
                border: 2rpx solid #ecdab3;
            }
        }
        .whenList {
            width: 200rpx;
            height: 60rpx;
            background-color: #fefcf1;
            border: 1rpx solid #ecdab3;
            border-radius: 10rpx;
            padding: 10rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-right: 20rpx;
            margin-bottom: 20rpx;
            .whenTxt {
                color: #aa9c81;
                font-size: 24rpx;
            }
        }
        .whenList:nth-child(3n) {
            margin-right: 0 !important;
        }
        .select {
            width: 34rpx;
            height: 34rpx;
            background-color: #ded8c5;
            border-radius: 50%;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .icon-xuanzhong {
            color: #8d7c59;
        }
        .icon-guanbi2 {
            color: #333;
            padding-top: 4rpx;
        }
        .Active .select {
            background-color: #e0bb71;
        }
        .Active .icon-xuanzhong {
            color: #fff;
        }
    }

    .Photography {
        width: 730rpx;
        background-color: #fff;
        margin: 24rpx auto 0 auto;
        border-radius: 10rpx;
        padding: 20rpx;
        .photoBox {
            width: 100%;
            display: grid;
            border: 1px solid #dadada;
            padding: 14rpx 10rpx 14rpx 20rpx;
            grid-template-columns: repeat(4, 1fr);
            margin-top: 20rpx;
            border-radius: 10rpx;
            .list {
                display: flex;
                align-items: center;
                padding: 14rpx 0;
                .dot {
                    width: 42rpx;
                    height: 42rpx;
                    border: 1px solid #e4e4e4;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .noDot {
                    background-color: #e1e1e1;
                    .icon-xuanzhong {
                        color: #e1e1e1;
                    }
                }
                .active {
                    background-color: #09bb07;
                    border: 1px solid #09bb07;
                    .icon-xuanzhong {
                        color: #fff;
                    }
                }
                .time {
                    color: $color_d85;
                    font-size: 28rpx;
                    margin-left: 10rpx;
                }
            }
        }
    }
    .Time {
        width: 100%;
        height: 150rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #666;
        font-size: 28rpx;
    }

    .Info {
        width: 730rpx;
        background-color: #fff;
        border-radius: 10rpx;
        margin: 0 auto;
        padding: 20rpx;
        display: flex;

        .Info_img {
            width: 180rpx;
            height: 180rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
        }

        .content {
            flex: 1;
            display: flex;
            flex-direction: column;

            .name {
                color: #000;
                font-size: 32rpx;
            }

            .startTime {
                color: $color_d85;
                font-size: 28rpx;
                margin-top: 10rpx;
            }
        }
    }

    .banquet {
        width: 730rpx;
        background-color: #fff;
        border-radius: 10rpx;
        margin: 24rpx auto 0;
        padding: 20rpx 20rpx 50rpx 20rpx;
        display: flex;
        flex-direction: column;

        .banBox {
            width: 330rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20rpx;
            margin-top: 10rpx;
            // flex-wrap: wrap;

            .banList {
                width: 330rpx;
                height: 60rpx;
                background-color: $color_d85;
                color: #fff;
                font-size: 26rpx;
                border-radius: 8rpx;
                margin-top: 20rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .panBoX {
                width: 100%;
                display: flex;
                justify-content: space-around;
            }

            .panlist {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 20rpx;
                margin-right: 30rpx;
                // margin: 20rpx;
                background-color: #fefcf1;
                box-shadow: 0 0 10rpx #ccc;
                border-radius: 10rpx;
                overflow: hidden;
                padding-bottom: 10rpx;
            }
            .panlist:last-child {
                margin-right: 0;
            }

            .panImg {
                width: 120rpx;
                height: 120rpx;
                border-radius: 10rpx 10rpx 0 0;
            }

            .panTxt {
                color: #aa9c81;
                font-size: 22rpx;
                padding: 6rpx 0;
            }

            .select {
                width: 34rpx;
                height: 34rpx;
                background-color: #ded8c5;
                border-radius: 50%;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .Active .select {
                background-color: $color_d85;
            }

            .Active .icon-xuanzhong {
                color: #fff;
            }
        }
    }

    .Customer {
        width: 730rpx;
        background-color: #fff;
        border-radius: 10rpx;
        margin: 24rpx auto 0;
        padding: 20rpx 20rpx 50rpx 20rpx;
        display: flex;
        flex-direction: column;

        .CustList {
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: 24rpx;

            .Inputplace {
                width: 370rpx;
                height: 80rpx;
                border: 1px solid #999;
                padding: 0 14rpx;
                border-radius: 10rpx;
                font-size: 30rpx;
                color: #000;
            }

            .seleBox {
                display: flex;
                align-items: center;

                .liS {
                    display: flex;
                    align-items: center;
                    margin-left: 20rpx;

                    .Boxs {
                        width: 40rpx;
                        height: 40rpx;
                        border-radius: 50%;
                        border: 1px solid #999;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    .liS_name {
                        color: $color_d85;
                        font-size: 32rpx;
                        margin-left: 6rpx;
                    }
                }

                .Active {
                    .Boxs {
                        background-color: #09bb07 !important;
                        border: 1px solid #09bb07 !important;
                    }
                }
            }

            .getPhones {
                width: 200rpx;
                height: 76rpx;
                background-color: $color_d85;
                line-height: 76rpx;
                color: #fff;
                font-size: 26rpx;
                display: block;
            }
        }
    }

    .Cosmetic {
        width: 730rpx;
        background-color: #fff;
        border-radius: 10rpx;
        margin: 24rpx auto 0;
        padding: 20rpx 20rpx 50rpx 20rpx;
        display: flex;
        flex-direction: column;

        .Cosmetic_time {
            width: 100%;
            padding: 10rpx 20rpx 30rpx 20rpx;
            border: 1px solid $color_d85;
            border-radius: 10rpx;
            margin-top: 32rpx;
            display: flex;
            flex-wrap: wrap;

            .meticList {
                display: flex;
                align-items: center;
                margin-top: 30rpx;
                margin-right: 40rpx;

                .Bos {
                    width: 40rpx;
                    height: 40rpx;
                    border-radius: 50%;
                    border: 1px solid #dddddd;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .timeActive {
                    background-color: #09bb07;
                    border: 1px solid #09bb07;
                }

                .forbidden {
                    background-color: #e1e1e1;
                }

                .Times {
                    color: $color_d85;
                    font-size: 30rpx;
                    margin-left: 10rpx;
                }
            }

            .meticList:nth-child(4n) {
                margin-right: 0;
            }
        }
    }

    .title {
        color: $color_d85;
        font-size: 32rpx;
    }

    .agreement {
        width: 720rpx;
        margin: 30rpx auto;
        display: flex;

        .agrees {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            border: 1rpx solid #999;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .Active {
            border: 1rpx solid #09bb07;
            background-color: #09bb07;
        }

        .ageTxt {
            color: $color_ff8;
            font-size: 26rpx;
            margin-left: 10rpx;
        }

        .ageList {
            color: $color_d85;
            font-size: 28rpx;
        }
    }

    .footer {
        width: 100%;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        box-sizing: content-box;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1rpx solid #e5e5e5;

        .Box {
            width: 100%;
            height: 110rpx;
            padding: 0 30rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .Price {
                color: $color_d85;
                font-size: 42rpx;
            }

            .NowPlay {
                width: 470rpx;
                height: 80rpx;
                background-color: $color_d85;
                border-radius: 10rpx;
                color: #fff;
                font-size: 30rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }

    /deep/.place {
        color: #999;
        font-size: 30rpx;
    }
</style>
